<template>
	<view>
		<view class="p-3">
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">姓名：</text>
				<input type="text" v-model="addressData.uname" placeholder="请输入姓名" />
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">手机号码：</text>
				<input type="text" v-model="addressData.uphone" placeholder="请输入手机号" />
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">身份证号：</text>
				<input type="text" v-model="addressData.id_card" placeholder="请输入身份证号" />
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">年龄：</text>
				<input type="text" v-model="addressData.age" placeholder="请输入年龄" />
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">已婚/未婚：</text>
				<radio value="1" :checked="addressData.marital_status==1" @click="radio(1)">已婚</radio>
				<radio value="2" :checked="addressData.marital_status==2" @click="radio(2)">未婚</radio>
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">地区：</text>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeProvince" :value="indexprovince" :range="provincearr">
						<view>{{provincearr[indexprovince]}}</view>
					</picker>
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeCity" :value="indexcity" :range="cityarr">
						<view>{{cityarr[indexcity]}}</view>
					</picker>
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeDistrict" :value="indexdistrict" :range="districtarr">
						<view>{{districtarr[indexdistrict]}}</view>
					</picker>
				</view>
			</view>
			<view class="row j-start a-center" style="height: 110upx;border-bottom: 1px solid #f6f6f6;">
				<text class="pr-1 font-md font-weight-6" style="width: 160upx;">收货地址：</text>
				<input type="text" v-model="addressData.uaddress" placeholder="如小区.办公楼等" />
			</view>
		</view>
		<view class="p-1 main-bg-color-hui"></view>
		<view class="p-3">
			<view class="main-text-color-hei font-weight-6 row j-sb" >
				<text>设置为默认地址：</text>
				<switch @change="switchChange" :checked="addressData.checked" />
			</view>
			<view class="pt-5">
				<view  @click="confirm" class="text-center main-text-color-bai main-bg-color-cheng font-md" style="height: 80upx;line-height: 80upx;border-radius: 40upx;">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				id:'',
				baseUrl:request.common.baseUrl,
				provincearr:[],
				indexprovince: 0,
				addressData: {
					uname: '',
					uphone: '',
					age: '',
					id_card: '',
					marital_status:0,
					province: '',
					city: '',
					district: '',
					uaddress: '',
					state:1,
					checked:true,
					area_code:''
				},
				cityarr:[],
				indexcity:0,
				districtarr:[],
				indexdistrict:0
			}
		},
		onLoad:function(option){
			if(option.id){
				this.id=option.id
				uni.request({
					url: request.common.baseUrl+'/api/address/getAddress',
					data: {
						token:uni.getStorageSync('keyToken'),
						id:option.id
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.addressData=res.data.data
							if(res.data.data.state==1){
								this.addressData.checked=true
							}else{
								this.addressData.checked=false
							}
						}
					}
				})
			}
			
			uni.request({
				url: request.common.baseUrl+'/api/address/province',
				data: {},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.addressData.province=res.data.data[0].areaName
						this.addressData.area_code=res.data.data[0].areaCode
						uni.setStorageSync('keyProvince',res.data.data)
						for (var j = 0; j < res.data.data.length; j++) {
							this.provincearr.push(res.data.data[j].areaName)
						}
						uni.request({
							url: request.common.baseUrl+'/api/address/cityDistrict',
							data: {
								parentId:uni.getStorageSync('keyProvince')[0].areaId
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									this.addressData.city=res.data.data[0].areaName
									this.addressData.area_code=res.data.data[0].areaCode
									uni.setStorageSync('keyCity',res.data.data)
									for (var j = 0; j < res.data.data.length; j++) {
										this.cityarr.push(res.data.data[j].areaName)
									}
									uni.request({
										url: request.common.baseUrl+'/api/address/cityDistrict',
										data: {
											parentId:uni.getStorageSync('keyCity')[0].areaId
										},
										header: {
											'Content-Type':'application/json;charset=UTF-8',
											'Content-Type':'application/x-www-form-urlencoded'
										},
										success: (res) => {
											if(res.data.code==200){
												this.addressData.distric=res.data.data[0].areaName
												this.addressData.area_code=res.data.data[0].areaCode
												uni.setStorageSync('keyDistrict',res.data.data)
												for (var j = 0; j < res.data.data.length; j++) {
													this.districtarr.push(res.data.data[j].areaName)
												}
											}
										}
									})
								}
							}
						})
					}
				}
			})
		},
		methods: {
			bindPickerChangeProvince(e) {
			    this.indexprovince = e.target.value
				this.addressData.province=uni.getStorageSync('keyProvince')[e.target.value].areaName
				this.addressData.area_code=uni.getStorageSync('keyProvince')[e.target.value].areaCode
				uni.request({
					url: request.common.baseUrl+'/api/address/cityDistrict',
					data: {
						parentId:uni.getStorageSync('keyProvince')[e.target.value].areaId
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.cityarr=[]
							this.districtarr=[]
							this.addressData.city=res.data.data[0].areaName
							this.addressData.area_code=res.data.data[0].areaCode
							uni.setStorageSync('keyCity',res.data.data)
							for (var j = 0; j < res.data.data.length; j++) {
								this.cityarr.push(res.data.data[j].areaName)
							}
							uni.request({
								url: request.common.baseUrl+'/api/address/cityDistrict',
								data: {
									parentId:uni.getStorageSync('keyCity')[0].areaId
								},
								header: {
									'Content-Type':'application/json;charset=UTF-8',
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.code==200){
										this.addressData.district=res.data.data[0].areaName
										this.addressData.area_code=res.data.data[0].areaCode
										uni.setStorageSync('keyDistrict',res.data.data)
										for (var j = 0; j < res.data.data.length; j++) {
											this.districtarr.push(res.data.data[j].areaName)
										}
									}
								}
							})
						}
					}
				})
				
			},
			bindPickerChangeCity(e) {
			    this.indexcity = e.target.value
				this.addressData.city=uni.getStorageSync('keyCity')[e.target.value].areaName
				this.addressData.area_code=uni.getStorageSync('keyCity')[e.target.value].areaCode
				uni.request({
					url: request.common.baseUrl+'/api/address/cityDistrict',
					data: {
						parentId:uni.getStorageSync('keyCity')[e.target.value].areaId
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.districtarr=[]
							this.addressData.district=res.data.data[0].areaName
							this.addressData.area_code=res.data.data[0].areaCode
							uni.setStorageSync('keyDistrict',res.data.data)
							for (var j = 0; j < res.data.data.length; j++) {
								this.districtarr.push(res.data.data[j].areaName)
							}
						}
					}
				})
				
			},
			bindPickerChangeDistrict(e) {
			    this.indexdistrict = e.target.value
				this.addressData.district=uni.getStorageSync('keyDistrict')[e.target.value].areaName
				this.addressData.area_code=uni.getStorageSync('keyDistrict')[e.target.value].areaCode
				
			},
			confirm() {
				let data = this.addressData;
				if(data.uname==''||data.uphone==''||data.id_card==''||data.age==''||data.marital_status==0||data.uaddress==''){
					uni.showModal({
					    title: '提示',
					    content: '请填选完善',
					    success: function (res) {
					    }
					});
				}else{
					if(this.id){
						uni.request({
							url: request.common.baseUrl+'/api/address/editAddress',
							data: {
								id:this.id,
								token:uni.getStorageSync('keyToken'),
								uname:data.uname,
								uphone:data.uphone,
								id_card:data.id_card,
								age:data.age,
								marital_status:data.marital_status,
								province:data.province,
								city:data.city,
								district:data.district,
								uaddress:data.uaddress,
								state:data.state,
								area_code:data.area_code
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									uni.navigateBack({
										delta: 1
									})
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000,
									})
								}
							}
						})
					}else{
						uni.request({
							url: request.common.baseUrl+'/api/address/addAddress',
							data: {
								token:uni.getStorageSync('keyToken'),
								uname:data.uname,
								uphone:data.uphone,
								id_card:data.id_card,
								age:data.age,
								marital_status:data.marital_status,
								province:data.province,
								city:data.city,
								district:data.district,
								uaddress:data.uaddress,
								state:data.state,
								area_code:data.area_code
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									uni.navigateBack({
										delta: 1
									})
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000,
									})
								}
							}
						})
					}
					
				}
				
			},
			switchChange: function (e) {
				if(e.target.value==true){
					this.addressData.state=1
				}else if(e.target.value==false){
					this.addressData.state=2
				}
			},
			radio(e){
				this.addressData.marital_status=e
			}
		}
	};
</script>

<style>
	input{
		font-size:24upx;
		color:#999999;
	}
	radio{
		font-size:24upx;
		color:#999999;
		margin-right:50upx;
	}
</style>
